import React from 'react'
import { Link, useLocation } from 'react-router-dom'
import { Menu, X, LogOut } from 'lucide-react'

function Sidebar({ navigation, open, onToggle, currentUser, onLogout }) {
  const location = useLocation()

  return (
    <>
      {/* Mobile menu button */}
      <div className="lg:hidden fixed top-4 left-4 z-50">
        <button
          onClick={onToggle}
          className="p-2 rounded-lg bg-blue-600 text-white shadow-lg"
        >
          {open ? <X size={20} /> : <Menu size={20} />}
        </button>
      </div>

      {/* Sidebar */}
      <div className={`
        fixed inset-y-0 left-0 z-40 w-64 bg-blue-800/20 backdrop-blur-lg border-r border-blue-700/30
        transform transition-transform duration-300 ease-in-out lg:translate-x-0
        ${open ? 'translate-x-0' : '-translate-x-full'}
      `}>
        <div className="flex flex-col h-full">
          {/* Logo */}
          <div className="flex items-center justify-center h-16 px-4 border-b border-blue-700/30">
            <div className="text-2xl font-bold text-white">
              <span className="bg-gradient-to-r from-blue-400 to-cyan-400 bg-clip-text text-transparent">
                网关管理系统
              </span>
            </div>
          </div>

          {/* Navigation */}
          <nav className="flex-1 px-4 py-6 space-y-2">
            {navigation.map((item) => {
              const isActive = location.pathname === item.href
              const Icon = item.icon
              
              return (
                <Link
                  key={item.name}
                  to={item.href}
                  className={`
                    group flex items-center px-3 py-2 text-sm font-medium rounded-lg transition-all duration-200
                    ${isActive
                      ? 'bg-blue-600/30 text-white shadow-lg'
                      : 'text-blue-200 hover:bg-blue-700/30 hover:text-white'
                    }
                  `}
                >
                  <Icon className="mr-3 h-5 w-5 flex-shrink-0" />
                  {item.name}
                </Link>
              )
            })}
          </nav>

          {/* User Info and Logout */}
          {currentUser && (
            <div className="mt-auto p-4 border-t border-blue-700/30">
              <div className="flex items-center justify-between mb-3">
                <div className="flex items-center">
                  <div className="w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center text-white text-sm font-medium">
                    {currentUser.username.charAt(0).toUpperCase()}
                  </div>
                  <div className="ml-3">
                    <p className="text-sm font-medium text-white">{currentUser.username}</p>
                    <p className="text-xs text-blue-200 capitalize">{currentUser.role}</p>
                  </div>
                </div>
              </div>
              <button
                onClick={onLogout}
                className="w-full flex items-center px-3 py-2 text-sm font-medium rounded-lg text-blue-200 hover:bg-blue-700/30 hover:text-white transition-all duration-200"
              >
                <LogOut className="mr-3 h-5 w-5 flex-shrink-0" />
                退出登录
              </button>
            </div>
          )}
        </div>
      </div>

      {/* Overlay for mobile */}
      {open && (
        <div 
          className="lg:hidden fixed inset-0 bg-black/50 z-30"
          onClick={onToggle}
        />
      )}
    </>
  )
}

export default Sidebar